<!--主页面附件模块-->
<template>
  <div class="appendix-card">
    <a-card size="small" :headStyle="{ background: '#f9f9f9' }" :bodyStyle="{ height: 'calc(100% - 48px)' }">
      <div slot="title">
        <div class="top-icon">
          <icon-font type="icon-pdfdownload" />
        </div>
        <span>附件数据</span>
      </div>
      <div slot="extra">
        <!-- 附件操作按钮 -->
        <a-dropdown
          v-for="(item, index) in AppendixVerb"
          :key="index"
          placement="bottomRight"
          class="icon-button">
          <a-button type="primary" :icon="item.icon">{{ item.title }}</a-button>
          <a-menu slot="overlay">
            <template v-for="(list, key) in item.type">
              <a-menu-item :key="key" :disabled="list.status" v-if="list.show">
                <span class="icon iconfont" :class="list.icon" style="margin-right: 6px;"></span>{{ list.title }}
              </a-menu-item>
              <!-- 最后一行没有分割线 -->
              <a-menu-divider :key="list.title" v-if="key!==item.type.length - 1" />
            </template>
          </a-menu>
        </a-dropdown>
      </div>
      <div class="card-table">
        <!-- 小分类模块 -->
        <div class="smallcatalog" :style="{width: (appendixSmallcatalog ? '15%': '0')}" v-if="false">
          <div class="appendixTree" v-if="appendixSmallcatalog">
            <h3>附件小分类</h3>
          </div>
          <div class="appendixHandle" @click="appendixToggle">
            <img src="@/assets/images/leftTree-show.png" alt="" v-if="appendixSmallcatalog">
            <img src="@/assets/images/leftTree-hide.png" alt="" v-else>
          </div>
        </div>
        <div class="appendix-table" :style="{width: (appendixSmallcatalog ? '85%': 'calc(100% - 2px)')}">
          <!-- 附件表格 -->
          <table-bar
            :tableData="appendixTableData"
            :tableColumns="appendixColumns"
            @textTable="textTable"></table-bar>
        </div>
      </div>
    </a-card>
  </div>
</template>

<script>
import TableBar from './TableBar'
export default {
  name: '',
  components: {
    TableBar
  },
  data () {
    return {
      appendixTableData: [{
        IsLock: true,
        OrderNum: '1',
        Year: '2020',
        Code: '1990-1-001',
        topic: '河南新安虎马沟村系列杀人抢劫案',
        BGQXData: '永久',
        MJ: '机密',
        Op_ID: 'admin',
        Remark: '测试数据1'
      }, {
        IsLock: false,
        OrderNum: '2',
        Year: '2020',
        Code: '1990-1-002',
        topic: '河南新安虎马沟村系列杀人抢劫案',
        BGQXData: '30年',
        MJ: '机密',
        Op_ID: 'admin',
        Remark: '测试数据2'
      }, {
        IsLock: false,
        OrderNum: '3',
        Year: '2020',
        Code: '1990-1-003',
        topic: '河南新安虎马沟村系列杀人抢劫案',
        BGQXData: '永久',
        MJ: '机密',
        Op_ID: 'admin',
        Remark: '测试数据3'
      }, {
        IsLock: false,
        OrderNum: '4',
        Year: '2020',
        Code: '1990-1-004',
        topic: '河南新安虎马沟村系列杀人抢劫案',
        BGQXData: '永久',
        MJ: '机密',
        Op_ID: 'admin',
        Remark: '测试数据4'
      }],
      appendixColumns: [{
        title: '锁标志',
        field: 'IsLock'
      }, {
        title: '顺序号',
        field: 'OrderNum'
      }, {
        title: '年代号',
        field: 'Year'
      }, {
        title: '档号',
        field: 'Code'
      }, {
        title: '题名',
        field: 'topic'
      }, {
        title: '保管期限',
        field: 'BGQXData'
      }, {
        title: '密级',
        field: 'MJ'
      }, {
        title: '操作员',
        field: 'Op_ID'
      }, {
        title: '备注',
        field: 'Remark'
      }],
      appendixSmallcatalog: false, // 是否显示附件小分类
      AppendixVerb: [ // 附件表格按钮集合
        {
          title: '常规操作',
          icon: 'tool',
          type: [
            { title: '添加附件', icon: 'icon-tianjiafujian', status: false, show: true },
            { title: '修改附件', icon: 'icon-xiugaifujian', status: false, show: true },
            { title: '删除附件', icon: 'icon-shanchufujian', status: false, show: true },
            { title: '克隆新增', icon: 'icon-kelong', status: false, show: true },
            { title: '标记备注', icon: 'icon-biaoji', status: false, show: true },
            { title: '修改轨迹', icon: 'icon-guiji', status: false, show: true }
          ]
        },
        {
          title: '附件大流水',
          icon: 'ordered-list',
          type: [
            { title: '上移', icon: 'icon-xiayi2', status: false, show: true },
            { title: '下移', icon: 'icon-xiayi1', status: false, show: true },
            { title: '转至', icon: 'icon-yizhi', status: false, show: true },
            { title: '重置流水', icon: 'icon-zhongzhi3', status: true, show: true }
          ]
        },
        {
          title: '附件小流水',
          icon: 'unordered-list',
          type: [
            { title: '上移', icon: 'icon-shangyi', status: false, show: true },
            { title: '下移', icon: 'icon-xiayi', status: false, show: true },
            { title: '转至', icon: 'icon-yizhi1', status: false, show: true },
            { title: '重置流水', icon: 'icon-zhongzhi1', status: true, show: true }
          ]
        },
        {
          title: '报表导出',
          icon: 'upload',
          type: [
            { title: '附件目录', icon: 'icon-baobiao', status: false, show: true },
            { title: '附件批量导出', icon: 'icon-icon', status: true, show: true }
          ]
        }
      ]
    }
  },
  created () {
  },
  mounted () {
  },
  methods: {
    // 附件小分类显示与隐藏
    appendixToggle () {
      this.appendixSmallcatalog = !this.appendixSmallcatalog
    },
    textTable () {
      this.$emit('textTable')
    }
  }
}
</script>
<style lang="less" scoped>
@import '../../../../assets/icons/iconfont.css';
.appendix-card {
  height: 100%;
  /deep/ .ant-card-body {
    .card-table {
      height: 100%;
      .smallcatalog {
        width: 15%;
        height: 100%;
        float: left;
        border: 1px solid #EEE;
        border-right: none;
        position: relative;
        transition: all 0.2s;
        .appendixTree {
          h3 {
            height: 40px;
            line-height: 40px;
            font-size: 16px;
            text-align: center;
            background: #FAFAFA;
            color: #666;
            border-bottom: 1px solid #EEE;
          }
        }
        .appendixHandle {
          position: absolute;
          right: -18px;
          z-index: 10;
          top: 50%;
          cursor: pointer;
        }
      }
      .appendix-table {
        width: 85%;
        height: 100%;
        float: left;
        transition: all 0.2s;
      }
    }
  }
}
</style>
